
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱旅行</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/flexible.js"></script>
</head>
<body class="mask">

    <!-- Header search bar  -->
    <header class="index-header">
        <div class="index-head-input">
            <span></span>
            <span>搜索旅行/酒店/景点</span>
        </div>
    </header>
    <section>
        <div class="container">
              <!-- Swiper -->
              <div class="index-swiper-container skt-loading">
                <div class="swiper-wrapper skeleton">
                   <a href="travelDatail.html?id=100002017" class="swiper-slide" ><img src="images/img/banner1.jpg"></a>
                   <a href="travelDatail.html?id=100002018" class="swiper-slide"><img src="images/img/banner2.jpg"></a>
                   <a href="travelDatail.html?id=100002019" class="swiper-slide"><img src="images/img/banner3.jpg"></a>
                   <a href="travelDatail.html?id=100002020" class="swiper-slide"><img src="images/img/banner4.jpg"></a>
                </div>
                <!-- Add Pagination -->
                <div class="index-swiper-pagination"></div>
                <!-- Add Arrows -->
            </div>
            <!-- Swiper JS -->
            <script src="js/swiper.min.js"></script>
            <!-- Initialize Swiper -->
            <script>
                var swiper = new Swiper('.index-swiper-container', {
                    spaceBetween: 30,
                    loop:true,
                    centeredSlides: true,
                     paginationClickable :true,
                    autoplay: {
                        delay: 2200,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el:'.index-swiper-pagination',
                        clickable: true,
                    },
                });
            </script>
            <!-- Navigation for travel, air tickets and hotels -->
            <div class="index-nav skt-loading">
            <div class="index-nav-tourism">
               
                <a href="travel.html" class="index-tourism skeleton"><span>旅游</span></a>
                <a href="#" class="index-Out-tourism skeleton"><span>出境游</span></a>
                <a href="#" class="index-domestic-tourism skeleton"><span>国内游</span></a>
                <a href="#" class="index-surrounding-tourism skeleton"><span>周边游</span></a>
                <a href="#" class="index-local-tourism skeleton"><span>当地游</span></a>
            </div>
            <div class="index-nav-ticket">
                <a href="#" class="index-ticket-plane skeleton"><span>机票</span></a>
                <a href="#" class="index-min-itcket skeleton"><span>低价机票</span></a>
                <a href="#" class="index-car-itcket skeleton"><span>汽车票/船票</span></a>
                <a href="#" class="index-train-itcket skeleton"><span>火车票</span></a>
                <a href="#" class="index-drive-itcket skeleton"><span>专车/自驾</span></a>
            </div>
            <div class="index-nav-hotel">
                <a href="#" class="index-hotel skeleton"><span>酒店</span></a>
                <a href="#" class="index-overseas-hotel skeleton"><span>海外酒店</span></a>
                <a href="#" class="index-domestic-hotel skeleton"><span>国内酒店</span></a>
                <a href="#" class="index-hot-hotel skeleton" ><span>热门酒店</span></a>
                <a href="#" class="index-features skeleton"><span>特色酒店</span></a>
            </div>
            </div>
            <!-- Advertising images -->
            <div class="index-advertising-img skt-loading">
                <a href="#"  class="skeleton">
                    <img src="images/img/ad_0328_02.jpg" alt="">
                </a>
            </div>
            </div>
            <div class="index-sale-hui">
                <header class="index-sale-head">
                    <h3 class="index-sale-text">特卖汇</h3>
                </header>
                    <ul class="sale-hui">
                        <li class='ske'><a href='javascript:void(0)'><div class='index-sale-img skeleton'></div><p class='index-sale-title skeleton'>巴厘岛7日5晚自由行。五星豪庭，三星价格3月特...</p><div class='index-sale-state skeleton'> <span>席位充足</span></div></a></li><li class='ske'><a href='javascript:void(0)'><div class='index-sale-img skeleton'></div><p class='index-sale-title skeleton'>巴厘岛7日5晚自由行。五星豪庭，三星价格3月特...</p><div class='index-sale-state skeleton'> <span>席位充足</span></div></a></li>
                    </ul>
            </div>
    </section>

    <footer>
        <ul>
            <li>
                <a href="index.html" class="index">
                    <span class="img-index"></span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="search.html" class="search">
                    <span class="img-search"></span>
                    <p>目的地</p>
                </a>
            </li>
            <li>
                <a href="history.html" class="history">
                    <span class="img-history-active"></span>
                    <p>浏览历史</p>
                </a>
            </li>
            <li>
                <a href="myinfo.html" class="myinfo">
                    <span class="img-myinfo"></span>
                    <p>个人</p>
                </a>
            </li>
        </ul>
    </footer>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

